﻿<paging:MtPage x:Name="PageRoot"
                     x:Class="SampleWindowsStoreApp.Views.WelcomePage"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     xmlns:paging="using:MyToolkit.Paging"
                     xmlns:viewModels="using:SampleWindowsStoreApp.ViewModels"
                     mc:Ignorable="d">

    <paging:MtPage.Resources>
        <viewModels:WelcomePageModel x:Key="ViewModel" />
    </paging:MtPage.Resources>

    <Grid DataContext="{StaticResource ViewModel}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <CollectionViewSource x:Name="GroupedItemsViewSource" Source="{Binding Groups}" IsSourceGrouped="true" ItemsPath="TopItems" />
        </Grid.Resources>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button Margin="39,59,39,0" Command="{Binding Frame.GoBackCommand, ElementName=PageRoot}"
                    Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top"
                    AutomationProperties.Name="Back"
                    AutomationProperties.AutomationId="BackButton"
                    AutomationProperties.ItemType="Navigation Button"/>

            <TextBlock Style="{StaticResource SubheaderTextStyle}" Text="Windows 8 and MyToolkit Sample App" Margin="0,50,0,10" Grid.Column="1" />
            <TextBlock Text="Welcome" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,100,0,0"/>
        </Grid>

        <GridView AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" 
                  Padding="116,40,40,40" SelectionMode="None" IsSwipeEnabled="false" Grid.Row="1"
                  ItemClick="OnItemClick" IsItemClickEnabled="True"
                  ItemsSource="{Binding Source={StaticResource GroupedItemsViewSource}}">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Left" Width="250" Height="150">
                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                        </Border>
                        <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                            <TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" 
                                       Style="{StaticResource TitleTextBlockStyle}" FontSize="18" Height="60" Margin="15,10,15,0"/>
                            <TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
                                       Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,15"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid GroupPadding="0,0,70,0"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,0,2">
                                <Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}" AutomationProperties.Name="Group Title" Style="{StaticResource TextBlockButtonStyle}" >
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="0,-11,10,10" 
                                                   Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                        <TextBlock Text="&#xE26B;" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" 
                                                   Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </Grid>
</paging:MtPage>
